<template>
  <div class="tab">
    <div>Home component</div>
    <div>count : {{ count }} <button @click="count++">增加count</button></div>

    <div>
      <Child>
        <template v-slot:default>
          <div style="color: blue">{{ message }}</div>
        </template>
         <template v-slot:content="obj">
           {{ obj.message }}
        </template>
      </Child>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Child from "./HomeChild.vue";
import { onMounted, onUnmounted, onActivated, onDeactivated, ref } from "vue";
const count = ref(0);

const message = ref("home 传入的模板内容 --- new Value");

onMounted(() => {
  console.log("Home组件被加载了");
});

onUnmounted(() => {
  console.log("Home组件被卸载了");
});

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时

  console.log("Home组件被激活了");
});

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log("Home组件被设置为未激活状态了");
});
</script>